<template>
  <div>
    <el-button
      v-if="adminLevel < levelRequired"
      type="info"
      size="small"
      disabled
    >无权操作</el-button>
    <el-button-group
      v-if="adminLevel >= levelRequired"
      v-show="!isConfirm"
    >
      <el-button
        type="primary"
        size="small"
        @click="isConfirm = true"
      >同意</el-button>
      <el-button
        type="primary"
        size="small"
        @click="refusal()"
      >驳回</el-button>
    </el-button-group>
    <el-button-group
      v-if="adminLevel >= levelRequired"
      v-show="isConfirm"
    >
      <el-button
        type="primary"
        size="small"
        @click="approval()"
      >确认</el-button>
      <el-button
        type="primary"
        size="small"
        @click="isConfirm = false"
      >取消</el-button>
    </el-button-group>
  </div>
</template>

<script>
  export default {
    name: "buttonConfirm",
    props: ["index", "levelRequired"],
    components: {},
    data() {
      return {
        isConfirm: false,
        reason: "",
      };
    },
    computed: {
      adminLevel() {
        return this.$store.getters.adminLevel;
      },
    },
    methods: {
      approval() {
        this.$emit("yes", { index: this.index, freetext: "" });
        this.isConfirm = false;
      },
      refusal() {
        this.$prompt("请输入原因", "驳回", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /^.{6,}$/,
            inputErrorMessage: "必须输入原因，长度6-200字",
          })
          .then(({ value }) => {
            this.$emit("no", { index: this.index, freetext: value });
            // this.$message({
            //   type: "success",
            //   message: "已驳回：" + value,
            // });
          })
          .catch(() => {
            //   this.$message({
            //     type: 'info',
            //     message: '取消输入'
            //   });
          });
      },
    },
  };
</script>

<style scoped>
</style>